<template>
  <div class="index-box">
    <div class="title">
      <span>审核物业管理费</span>
    </div>
    <div class="index-middlebox">
      <div class="middle-item">
        <span>小区名称</span>
        <template>
          <el-input v-model="compoundName" class="productname-input" />
        </template>
      </div>
      <div class="middle-item">
        <span>确认状态</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in rankList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <!-- <div class="middle-item">
        <span>兑换日期</span>
        <template>
          <el-date-picker v-model="date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
        </template>
      </div> -->
      <div class="middle-item" style="width:300px;">
        <template>
          <el-button type="primary" class="search" @click="getqueryAdminBuildingList">查询</el-button>
          <el-button type="primary" class="search2" @click="getcreateUserBuildingDetail">生成结算单</el-button>
        </template>
      </div>
    </div>
    <div class="index-list-box">
      <template>
        <el-table
          :data="merchandiseList"
          border
          :summary-method="getSummaries"
          show-summary
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="id" label="选择" width="50" align="center" type="selection" />
          <el-table-column
            type="index"
            label="序号"
            align="center"
          />
          <el-table-column
            prop="compoundName"
            label="小区名称"
            align="center"
          />
          <el-table-column
            prop="companyName"
            label="物业管理公司名称"
            align="center"
          />
          <el-table-column
            prop="userNum"
            label="业主总人数"
            align="center"
          />
          <el-table-column
            prop="propertyManagementFee"
            label="物业管理费"
            align="center"
          />
          <el-table-column
            prop="waterElectricityFee"
            label="水电费"
            align="center"
          />
          <el-table-column
            prop="costTotal"
            label="总兑换费"
            align="center"
          />
          <el-table-column
            prop="xljPropertyStatus"
            label="确认状态"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.xljPropertyStatus == 0">未确认</span>
              <span v-if="scope.row.xljPropertyStatus == 1">已确认</span>
              <span v-if="scope.row.xljPropertyStatus == 2">确认中</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="250"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="toStratafeedetails(scope.$index, scope.row)"
              >明细</el-button>
              <el-button
                size="mini"
                @click="handlecompile(scope.$index, scope.row)"
              >编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 分页器 -->
    <div class="current">
      <div class="block">
        <el-pagination
          :page-size="10"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div>
        <el-dialog
                title="编辑信息"
                :visible.sync="dialogVisible"
                width="30%"
                >
                <div class="compile-box">
                  <div class="compile-item">
                    <span>物业管理费:</span>
                    <el-input class="compile-input" v-model="propertyManagementFee"></el-input>
                  </div>
                  <div class="compile-item">
                    <span style="padding-right: 30px;">水电费:</span>
                    <el-input class="compile-input"  v-model="waterElectricityFee"></el-input>
                  </div>
                  <div class="compile-item">
                    <span style="padding-right: 20px;">总兑换费:</span>
                    <el-input class="compile-input"  v-model="costTotal"></el-input>
                  </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="geteditAdminBuilding">确 定</el-button>
                </span>
        </el-dialog>
      </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getqueryAdminBuildingList, getcreateUserBuildingDetail, geteditAdminBuilding, getcreateSettle} from '@/api/PropertyManagement'
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      merchandiseList: [],
      compoundName: '',
      rankList: [{
        value: 0,
        label: '未确认'
      }, {
        value: 1,
        label: '已确认'
      }, {
        value: 3,
        label: '确认中'
      }],
      ReceivingList: [{
        value: 0,
        label: '待收货'
      }, {
        value: 1,
        label: '已收货'
      }],
      value: '',
      date: '',
      total: 0, // 用户总条数
      pagesize: 10, // 每页显示多少条，默认为10条
      pageNo: 1, // 当前页码，默认为第一页
      selectList: [],
      propertyManagementFee:0,//物业管理费
      costTotal:0,//总兑换费
      waterElectricityFee:0,//水电费
      dialogVisible:false,
      buildingId:''
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getqueryAdminBuildingList()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    handleSelectionChange(row) {
      this.selectList = row
    },
    // 获取审核列表
    getqueryAdminBuildingList() {
      let data = {
        pageNo: this.pageNo,
        pagesize: this.pagesize,
        compoundName: this.compoundName,
        xljPropertyStatus: this.value,
        // addTime: this.date
      }
      getqueryAdminBuildingList(data).then(res => {
        console.log(res)
        this.merchandiseList = res.rows
        this.pageNo = res.pageNo
        this.pagesize = res.pageSize
        this.total = res.total
      })
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.getqueryAdminBuildingList()
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.getqueryAdminBuildingList()
    },
    // 合计列
    getSummaries(param) {
      let { columns, data } = param
      let sums = []
      var allplumbermoney = 0
      var alltenementmoney = 0
      var allxljpointsmoney = 0
      data.map(item => {
        allplumbermoney += Number(item.propertyManagementFee)
        alltenementmoney += Number(item.waterElectricityFee)
        allxljpointsmoney += Number(item.costTotal)
        return { allplumbermoney, alltenementmoney, allxljpointsmoney }
      })
      columns.forEach((column, index) => {
        sums[4] = '合计'
        sums[5] = allplumbermoney
        sums[6] = alltenementmoney
        sums[7] = allxljpointsmoney
      })

      return sums
    },
    toStratafeedetails(index, row) {
      this.$router.push({
        path: 'Stratafeedetails',
        query: { row: row }
      })
    },
    // 生成结算单
    getcreateUserBuildingDetail() {
      let selectList = this.selectList
      selectList.forEach(item => {
        // if(item.xljPropertyStatus === 1){
          let data = {
            id: item.buildingId,
            companyFianlStatus:4,
          }
          getcreateSettle(data).then(res => {
            console.log(res)
            if(res.code == 20000){
              this.$message('生成成功')
              this.getqueryAdminBuildingList()
            }
          })
        // }else{
        //   this.$message({type:'warning',message:'请先确认明细'})
        // }
      })
    },
    // 编辑
      handlecompile(index, row){
        this.dialogVisible = true
        this.propertyManagementFee = row.propertyManagementFee
        this.costTotal = row.costTotal
        this.waterElectricityFee = row.waterElectricityFee
        this.buildingId = row.buildingId
      },
    // 编辑保存
    geteditAdminBuilding(){
      let data = {
        buildingId:this.buildingId,
        propertyManagementFee:this.propertyManagementFee,
        costTotal:this.costTotal,
        waterElectricityFee:this.waterElectricityFee
      }
      geteditAdminBuilding(data).then(res => {
        console.log(res)
        if(res.code == 20000){
          this.$message('编辑成功')
          this.dialogVisible = false
          this.getqueryAdminBuildingList()
        }
      })
    },
  }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.index-box{
    width: 100%;
    .title{
        width: 100%;
        padding:20px 40px 20px 40px;
        box-sizing: border-box;
        span{
            font-size: 20px;
            font-weight: bold;
        }
    }
    .index-middlebox{
        width: 100%;
        padding-left: 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .middle-item{
            span{
                display: inline-block;
                font-size: 14px;
                padding-right: 15px;
                padding-left: 30px;
                box-sizing: border-box;
            }
            .productname-input{
                width: 150px;
            }
            .search{
                width: 100px;
                margin-left:20px;
            }
            .search2{
                width: 120px;
                margin-left:20px;
            }
        }
    }
    .index-list-box{
        width: 100%;
        padding: 30px 40px;
        box-sizing: border-box;
    }
    .current {
      .block {
        text-align: center;
      }
    }
    .compile-box{
      width: 100%;
      text-align: center;
      .compile-item{
        width: 100%;
        margin-bottom: 20px;
      }
      .compile-input{
        width: 250px;
      }
    }
}
</style>
